mkcertを利用してローカルのNext.js開発環境にHTTPSアクセスができるようにしてみた
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。
Next.jsのアプリケーション開発をしている際に、HTTPSでアクセスしたいことはないでしょうか？私はあります。
ということで、mkcertを利用してローカルのNext.js開発環境にHTTPSアクセスができるようにしてみました。
前提
OS環境としては、MacOSで検証を行っています。
mkcert について
mkcertはローカル開発環境に信頼された証明書を作成できるツールです。
今回はこちらを利用して証明書を発行してみます。
インストール
インストールはMacOSの場合brewコマンドで簡単にインストールすることができます。なお、MacOS以外についてもREADMEにインストール方法が記載されています。
% brew install mkcert ==> Fetching mkcert ==> Downloading https://ghcr.io/v2/homebrew/core/mkcert/manifests/1.4.4 ######################################################################## 100.0% ==> Downloading https://ghcr.io/v2/homebrew/core/mkcert/blobs/sha256:caadb67940cb551fc16122dc0486cac6a0dc948ccb ==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:caadb67940cb551fc16122dc04 ######################################################################## 100.0% ==> Pouring mkcert--1.4.4.arm64_monterey.bottle.tar.gz ? /opt/homebrew/Cellar/mkcert/1.4.4: 6 files, 3.7MB ==> Running `brew cleanup mkcert`... Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP. Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).
% mkcert --version v1.4.4
インストール前の状態を確認する
security dump-trust-settingsコマンドを利用して、信頼済みの管理者証明書を確認してみます。
security settings
dump-trust-settings [-s] [-d]
Display Trust Settings.
Options:
-s Display trusted system certs; default is user.
-d Display trusted admin certs; default is user.
% security dump-trust-settings -d Number of trusted certs = 2 Cert 0: XXXXXXXXXX Certificate Authority Number of trust settings : 0 Cert 1: XXXXXXXXXX Certificate Authority Number of trust settings : 0
私の環境では既に2つの証明書が存在していました。（一応伏せ字にしています
ローカルCAを追加してみる
では、実際にmkcertを利用してローカルCAを作成し、信頼ストアに追加してみます。
% mkcert -install Created a new local CA ? Sudo password: The local CA is now installed in the system trust store! ⚡️
追加されました！ なお、追加時には何度か確認ダイアログが表示されるので、それぞれ許可します。
追加を確認してみる
実際に確認してみます。
% security dump-trust-settings -d Number of trusted certs = 3 Cert 0: XXXXXXXXXX Certificate Authority Number of trust settings : 0 Cert 1: XXXXXXXXXX Certificate Authority Number of trust settings : 0 Cert 2: mkcert [email protected] Number of trust settings : 2 Trust Setting 0: Policy OID : SSL Result Type : kSecTrustSettingsResultTrustRoot Trust Setting 1: Policy OID : Apple X509 Basic Result Type : kSecTrustSettingsResultTrustRoot
追加されたことが確認できました。
証明書を発行してみる
では、最後に任意のホスト名で証明書を発行してみます。今回はlocalhostの証明書を発行します。
% mkcert localhost Created a new certificate valid for the following names ? - "localhost" The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅ It will expire on 11 April 2025 ?
2つのファイルが作成されました！
Next.jsで試してみる
では、実際にHTTPSでアクセスできるか試してみます。
事前準備
まずは簡単なアプリを作成しておきます。
% yarn create next-app --typescript yarn create v1.22.19 [1/4] ? Resolving packages... [2/4] ? Fetching packages... [3/4] ? Linking dependencies... [4/4] ? Building fresh packages... success Installed "[email protected]" with binaries: - create-next-app ✔ What is your project named? … https-next-app ✔ Would you like to use ESLint with this project? … No / Yes (...略...) ✨ Done in 40.48s.
アプリを作成したら、動作確認しておきます。
% cd https-next-app % yarn dev yarn run v1.22.19 $ next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 event - compiled client and server successfully in 914 ms (166 modules) wait - compiling / (client and server)... event - compiled client and server successfully in 850 ms (195 modules)
`http://localhost:3000`にアクセスすると想定どおり以下のように表示されました。
HTTPSでアクセスしてみる
では、HTTPSでアクセスしてみます。
プロキシとしてlocal-ssl-proxyを利用してアクセスをしてみます。
先程作成したファイルをNext.jsアプリのディレクトリに配置してから、下記のコマンドを実行します。
% npx local-ssl-proxy \ --key localhost-key.pem \ --cert localhost.pem \ --source 3001 \ --target 3000 Need to install the following packages: [email protected] Ok to proceed? (y) y npm WARN deprecated [email protected]: Package no longer supported. Contact [email protected] for more info. Started proxy: https://localhost:3001 → http://localhost:3000
`https://localhost:3001`にアクセスすると以下のように表示されました。
証明書についても問題ありません。
まとめ
以上、mkcertを利用してローカルのNext.js開発環境にHTTPSアクセスができるようにしてみました。
最初のセットアップが少々手間ですが、手順は簡単ですし、一度設定してしまえばあとは特に問題なくHTTPS接続できるので良いですね。
どなたかのお役に立てば幸いです。それでは！
